import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Input, Row, Select, message } from 'antd';

const GoodsForm = (props) => {
  const { onHandleAdd, dispatch } = props;
  const [expand, setExpand] = useState(false);
  const [form] = Form.useForm();
  // const getFields = () => {
  //   const count = expand ? 10 : 6;
  //   const children = [];
  //   for (let i = 0; i < count; i++) {
  //     children.push(
  //       <Col span={8} key={i}>
  //         <Form.Item
  //           name={`field-${i}`}
  //           label={`Field ${i}`}
  //           rules={[
  //             {
  //               required: true,
  //               message: 'Input something!',
  //             },
  //           ]}
  //         >
  //           {i % 3 !== 1 ? (
  //             <Input placeholder="placeholder" />
  //           ) : (
  //             <Select defaultValue="2">
  //               <Option value="1">1</Option>
  //               <Option value="2">
  //                 longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
  //               </Option>
  //             </Select>
  //           )}
  //         </Form.Item>
  //       </Col>,
  //     );
  //   }
  //   return children;
  // };

  // useEffect(() => {
  //   console.log(window.location.pathname);
  // }, [])

  const onFinish = (values) => {
    // console.log('Received values of form: ', values);
    onHandleAdd(values);
  };

  const buttonMessage = (path) => {
    // console.log(path);
    switch (path) {
      case '/goods/increase':
        return 'increase';
      case '/goods/delete':
        return 'delete';
      case '/goods/modify':
        return 'modify';
      case '/goods/query':
        return 'query';
      default:
    }
    return '';
  };

  const isQuery = window.location.pathname === '/goods/query';

  // const showAllGoodsList = () => {
  //   dispatch({
  //     type: 'goods/getAllGoodsList',
  //   });
  // };

  return (
    <Form form={form} name="add_form" onFinish={onFinish}>
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name="name"
            label="name"
            rules={[
              {
                required: true,
                message: '请输入商品名称!',
              },
            ]}
          >
            <Input placeholder="请输入商品名称" allowClear />
          </Form.Item>
        </Col>
        <Col span={8}>
          {!isQuery && (
            <Form.Item
              name="url"
              label="url"
              rules={[
                {
                  required: true,
                  message: '请输入商品图片地址!',
                },
              ]}
            >
              <Input placeholder="请输入商品图片地址" allowClear />
            </Form.Item>
          )}
        </Col>
        <Col span={8}>
          {!isQuery && (
            <Form.Item
              name="goods_price_max"
              label="goods_price_max"
              rules={[
                {
                  required: true,
                  message: '请输入商品价格!',
                },
              ]}
            >
              <Input placeholder="请输入商品价格" allowClear />
            </Form.Item>
          )}
        </Col>
        <Col span={8}>
          {!isQuery && (
            <Form.Item
              name="line_price_max"
              label="line_price_max"
              rules={[
                {
                  required: true,
                  message: '请输入商品原价!',
                },
              ]}
            >
              <Input placeholder="请输入商品原价" allowClear />
            </Form.Item>
          )}
        </Col>
        <Col span={8}>
          {!isQuery && (
            <Form.Item
              name="category_id"
              label="category_id"
              // rules={[
              //   {
              //     required: true,
              //     message: '请输入商品fenle!',
              //   },
              // ]}
            >
              <Input placeholder="请输入商品分类" allowClear />
            </Form.Item>
          )}
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          {isQuery && (
            <Form.Item name="tip" label="tip">
              <span>目前只提供了根据商品名查找！</span>
            </Form.Item>
          )}
        </Col>
      </Row>
      <Row>
        <Col
          span={24}
          style={{
            textAlign: 'right',
          }}
        >
          <Button type="primary" htmlType="submit">
            {buttonMessage(window.location.pathname)}
          </Button>
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => {
              form.resetFields();
              // showAllGoodsList();
            }}
          >
            Clear
          </Button>
          {/* <a
            style={{
              fontSize: 12,
            }}
            onClick={() => {
              setExpand(!expand);
            }}
          >
            {expand ? <UpOutlined /> : <DownOutlined />} Collapse
          </a> */}
        </Col>
      </Row>
    </Form>
  );
};

export default GoodsForm;
